<script setup lang="ts">
import { getTaskProcessDataApi } from "@/api/task"
import { EvalProcessEvaData } from "@/api/task/types/task"
import { GaugeOptionStrategy } from "@/components/Charts/GaugeOptionStrategy"
import { RadarOptionStrategy } from "@/components/Charts/RadarOptionStrategy"
import { TASK_EVAL_INDEX } from "@/constants/other-keys"
import { useECharts } from "@/hooks/useECharts"
import { RadarSeriesOption, SeriesOption } from "echarts/types/dist/echarts"
import { GaugeDataItemOption } from "echarts/types/src/chart/gauge/GaugeSeries.js"
import { RadarSeriesDataItemOption } from "echarts/types/src/chart/radar/RadarSeries.js"
import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue"

interface Props {
  id: string | undefined
  taskStatus: number | undefined
  taskProcess: number | undefined
  evalIndex: TASK_EVAL_INDEX[]
}
const props = defineProps<Props>()

let timer: number | null = null
const taskId = ref<string | undefined>(props.id)
const taskStatus = ref<number | undefined>(props.taskStatus)
const evalIndex = ref<TASK_EVAL_INDEX[]>(props.evalIndex)
const AbilityElRef = ref<HTMLElement | null>(null)
const PerceptionScoutElRef = ref<HTMLElement | null>(null)
const PerceptionCoorElRef = ref<HTMLElement | null>(null)
const CognitionAutoElRef = ref<HTMLElement | null>(null)
const CognitionCoorElRef = ref<HTMLElement | null>(null)
const DecisionAssistElRef = ref<HTMLElement | null>(null)
const DecisionGameElRef = ref<HTMLElement | null>(null)
const ActionGroupElRef = ref<HTMLElement | null>(null)
const ActionCoorElRef = ref<HTMLElement | null>(null)
const DEFAULT_CHARTDATA = {
  comprehensive_ability: 0,
  perception: {
    detective: 0,
    search: 0,
    ability: 0
  },
  cognition: {
    autonomy: 0,
    cooperativity: 0,
    ability: 0
  },
  decision: {
    fire_support: 0,
    game_learning: 0,
    ability: 0
  },
  action: {
    cluster_grouping: 0,
    cooperativity: 0,
    ability: 0
  }
}
const state = ref<{
  comprehensive_ability: number
  perception: {
    detective: number
    search: number
    ability: number
  }
  cognition: {
    autonomy: number
    cooperativity: number
    ability: number
  }
  decision: {
    fire_support: number
    game_learning: number
    ability: number
  }
  action: {
    cluster_grouping: number
    cooperativity: number
    ability: number
  }
}>(DEFAULT_CHARTDATA)

// 综合能力
const AbilityChart = useECharts(
  AbilityElRef,
  new RadarOptionStrategy().getOptions({
    radar: [
      {
        indicator: [
          { text: "综合能力", max: 100 },
          { text: "感知能力", max: 100 },
          { text: "认知能力", max: 100 },
          { text: "决策能力", max: 100 },
          { text: "行动能力", max: 100 }
        ]
      }
    ],
    series: [
      {
        data: [
          {
            value: [
              state.value.comprehensive_ability,
              state.value.perception.ability,
              state.value.cognition.ability,
              state.value.decision.ability,
              state.value.action.ability
            ]
          }
        ]
      }
    ]
  })
)
// 感知 侦察能力
const PerceptionScoutChart = useECharts(
  PerceptionScoutElRef,
  new GaugeOptionStrategy().getOptions({
    series: [
      {
        data: [
          {
            name: "侦察能力",
            value: state.value.perception.detective
          }
        ]
      }
    ]
  })
)
// 感知 区域协同
const PerceptionCoorChart = useECharts(
  PerceptionCoorElRef,
  new GaugeOptionStrategy().getOptions({
    series: [
      {
        data: [
          {
            name: "区域协同搜索能力",
            value: state.value.perception.search
          }
        ]
      }
    ]
  })
)
// 认知 自主性与轮数
const CognitionAutoChart = useECharts(
  CognitionAutoElRef,
  new GaugeOptionStrategy().getOptions({
    series: [
      {
        data: [
          {
            name: "自主性",
            value: state.value.cognition.autonomy
          }
        ]
      }
    ]
  })
)
// 认知 协同性与轮数
const CognitionCoorChart = useECharts(
  CognitionCoorElRef,
  new GaugeOptionStrategy().getOptions({
    series: [
      {
        data: [
          {
            name: "协同性",
            value: state.value.cognition.cooperativity
          }
        ]
      }
    ]
  })
)
// 决策 火力支援
const DecisionAssistChart = useECharts(
  DecisionAssistElRef,
  new GaugeOptionStrategy().getOptions({
    series: [
      {
        data: [
          {
            name: "火力支援能力",
            value: state.value.decision.fire_support
          }
        ]
      }
    ]
  })
)
// 决策 博弈学习能力
const DecisionGameChart = useECharts(
  DecisionGameElRef,
  new GaugeOptionStrategy().getOptions({
    series: [
      {
        data: [
          {
            name: "博弈学习能力",
            value: state.value.decision.game_learning
          }
        ]
      }
    ]
  })
)
// 行动 集群分组能力
const ActionGroupChart = useECharts(
  ActionGroupElRef,
  new GaugeOptionStrategy().getOptions({
    series: [
      {
        data: [
          {
            name: "集群分组能力",
            value: state.value.action.cluster_grouping
          }
        ]
      }
    ]
  })
)
// 行动 协同性
const ActionCoorChart = useECharts(
  ActionCoorElRef,
  new GaugeOptionStrategy().getOptions({
    series: [
      {
        data: [
          {
            name: "协同性",
            value: state.value.action.cooperativity
          }
        ]
      }
    ]
  })
)
const getTaskProcessData = () => {
  state.value = DEFAULT_CHARTDATA
  getTaskProcessDataApi(taskId.value as string)
    .then(({ data }) => {
      data.forEach((item) => {
        const processEva: EvalProcessEvaData = JSON.parse(item.process_eva)
        state.value.comprehensive_ability = processEva.comprehensive_ability
        state.value.perception.ability = processEva.perception ? processEva.perception.ability : 0
        state.value.perception.detective = processEva.perception ? processEva.perception.detective : 0
        state.value.perception.search = processEva.perception ? processEva.perception.regional_search : 0
        state.value.cognition.autonomy = processEva.cognition ? processEva.cognition.autonomy : 0
        state.value.cognition.cooperativity = processEva.cognition ? processEva.cognition.cooperativity : 0
        state.value.cognition.ability = processEva.cognition ? processEva.cognition.ability : 0
        state.value.decision.fire_support = processEva.decision ? processEva.decision.fire_support : 0
        state.value.decision.game_learning = processEva.decision ? processEva.decision.game_learning : 0
        state.value.decision.ability = processEva.decision ? processEva.decision.ability : 0
        state.value.action.cluster_grouping = processEva.action ? processEva.action.cluster_grouping : 0
        state.value.action.cooperativity = processEva.action ? processEva.action.cooperativity : 0
        state.value.action.ability = processEva.action ? processEva.action.ability : 0
      })
    })
    .finally(() => {
      if (evalIndex.value?.indexOf("perception") != -1) {
        // 感知能力
        PerceptionScoutChart.options.series &&
          (((PerceptionScoutChart.options.series as SeriesOption[])[0].data as GaugeDataItemOption[])[0].value =
            state.value.perception.detective)
        PerceptionCoorChart.options.series &&
          (((PerceptionCoorChart.options.series as SeriesOption[])[0].data as GaugeDataItemOption[])[0].value =
            state.value.perception.search)
      }
      if (evalIndex.value?.indexOf("cognition") != -1) {
        // 认知能力
        CognitionCoorChart.options.series &&
          (((CognitionCoorChart.options.series as SeriesOption[])[0].data as GaugeDataItemOption[])[0].value =
            state.value.cognition.cooperativity)
        CognitionAutoChart.options.series &&
          (((CognitionAutoChart.options.series as SeriesOption[])[0].data as GaugeDataItemOption[])[0].value =
            state.value.cognition.autonomy)
      }
      if (evalIndex.value?.indexOf("decision") != -1) {
        // 决策能力
        DecisionAssistChart.options.series &&
          (((DecisionAssistChart.options.series as SeriesOption[])[0].data as GaugeDataItemOption[])[0].value =
            state.value.decision.fire_support)
        DecisionGameChart.options.series &&
          (((DecisionGameChart.options.series as SeriesOption[])[0].data as GaugeDataItemOption[])[0].value =
            state.value.decision.game_learning)
      }
      if (evalIndex.value?.indexOf("action") != -1) {
        // 行动能力
        ActionGroupChart.options.series &&
          (((ActionGroupChart.options.series as SeriesOption[])[0].data as GaugeDataItemOption[])[0].value =
            state.value.action.cluster_grouping)
        ActionCoorChart.options.series &&
          (((ActionCoorChart.options.series as SeriesOption[])[0].data as GaugeDataItemOption[])[0].value =
            state.value.action.cooperativity)
      }
      const series = AbilityChart.options && (AbilityChart.options.series as RadarSeriesOption[])[0]
      series &&
        series.data &&
        ((series.data as RadarSeriesDataItemOption[])[0].value = [
          state.value.comprehensive_ability,
          state.value.perception.ability,
          state.value.cognition.ability,
          state.value.decision.ability,
          state.value.action.ability
        ])
    })
}
const resize = () => {
  if (evalIndex.value?.indexOf("perception") != -1) {
    PerceptionScoutChart.handleResize()
    PerceptionCoorChart.handleResize()
  }
  if (evalIndex.value?.indexOf("cognition") != -1) {
    CognitionAutoChart.handleResize()
    CognitionCoorChart.handleResize()
  }
  if (evalIndex.value?.indexOf("decision") != -1) {
    DecisionAssistChart.handleResize()
    DecisionGameChart.handleResize()
  }
  if (evalIndex.value?.indexOf("action") != -1) {
    ActionGroupChart.handleResize()
    ActionCoorChart.handleResize()
  }

  AbilityChart.handleResize()
}

watch(
  () => props.taskStatus,
  () => {
    taskStatus.value = props.taskStatus
    getTaskProcessData()
  }
)

watch(
  () => props.evalIndex,
  () => {
    evalIndex.value = props.evalIndex
    nextTick(() => {
      resize()
    })
  }
)

onMounted(() => {
  getTaskProcessData()
  timer = Number(
    setInterval(() => {
      if (taskStatus.value == 1) {
        getTaskProcessData()
      }
    }, 1000 * 60)
  )
})
onBeforeUnmount(() => {
  timer && clearInterval(timer)
})

defineExpose({ resize })
</script>

<template>
  <div class="title">
    <svg-icon name="eval-perception" />
    <h3>综合能力</h3>
  </div>
  <el-row :gutter="20">
    <el-col class="mb-6" :span="24">
      <el-card shadow="never">
        <div ref="AbilityElRef" class="chart-card" />
      </el-card>
    </el-col>
  </el-row>
  <div class="title" v-show="evalIndex?.includes('perception')">
    <svg-icon name="eval-perception" />
    <h3>感知能力指标</h3>
  </div>
  <el-row :gutter="20" v-show="evalIndex?.includes('perception')">
    <el-col class="mb-6" :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
      <el-card shadow="never">
        <div ref="PerceptionScoutElRef" class="chart-card" />
      </el-card>
    </el-col>
    <el-col class="mb-6" :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
      <el-card shadow="never">
        <div ref="PerceptionCoorElRef" class="chart-card" />
      </el-card>
    </el-col>
  </el-row>
  <div class="title" v-show="evalIndex?.includes('cognition')">
    <svg-icon name="eval-cognition" />
    <h3>认知能力指标</h3>
  </div>
  <el-row :gutter="20" v-show="evalIndex?.includes('cognition')">
    <el-col class="mb-6" :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
      <el-card shadow="never">
        <div ref="CognitionAutoElRef" class="chart-card" />
      </el-card>
    </el-col>
    <el-col class="mb-6" :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
      <el-card shadow="never">
        <div ref="CognitionCoorElRef" class="chart-card" />
      </el-card>
    </el-col>
  </el-row>
  <div class="title" v-show="evalIndex?.includes('decision')">
    <svg-icon name="eval-decision" />
    <h3>决策能力指标</h3>
  </div>
  <el-row :gutter="20" v-show="evalIndex?.includes('decision')">
    <el-col class="mb-6" :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
      <el-card shadow="never">
        <div ref="DecisionAssistElRef" class="chart-card" />
      </el-card>
    </el-col>
    <el-col class="mb-6" :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
      <el-card shadow="never">
        <div ref="DecisionGameElRef" class="chart-card" />
      </el-card>
    </el-col>
  </el-row>
  <div class="title" v-show="evalIndex?.includes('action')">
    <svg-icon name="eval-action" />
    <h3>行动能力指标</h3>
  </div>
  <el-row :gutter="20" v-show="evalIndex?.includes('action')">
    <el-col class="mb-6" :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
      <el-card shadow="never">
        <div ref="ActionGroupElRef" class="chart-card" />
      </el-card>
    </el-col>
    <el-col class="mb-6" :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
      <el-card shadow="never">
        <div ref="ActionCoorElRef" class="chart-card" />
      </el-card>
    </el-col>
  </el-row>
</template>
<style lang="scss" scoped>
.title {
  display: flex;
  flex-direction: row;
  align-items: center;
  line-height: 42px;
  .svg-icon {
    width: 2em;
    height: 2em;
  }
  h3 {
    margin-left: 10px;
  }
}
.chart-card {
  height: calc(100vh - 530px);
  width: 100%;
  min-height: 300px;
}
</style>
